<template>
  <div class="exercise-container">
    <div class="header">
      <van-dropdown-menu>
        <van-dropdown-item ref="mymenu">
          <template #title>
            <span class="title">面试宝典</span>
            <span class="city">{{ site }}</span>
          </template>
          <van-index-bar>
            <template v-for="(item, index) in citys">
              <van-index-anchor :index="index" :key="index" />
              <van-cell
                :title="item2"
                v-for="(item2, index2) in item"
                :key="index2"
                @click="menuShow(item2)"
              />
            </template>
          </van-index-bar>
        </van-dropdown-item>
      </van-dropdown-menu>
      <ul class="box">
        <li
          v-for="(item, index) in cityPositions[site]"
          :key="item.id"
          :class="{ liClick: currentLi == index }"
          @click="currentLi = index;id=item.id"
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <div class="middle">
      <div class="outerring"></div>
      <div class="internal"></div>
      <van-circle
        v-model="currentRate"
        :rate="rate"
        :stroke-width="50"
        fill="transparent"
        :color="progressColor"
        layer-color="transparent"
      >
        <div class="van-circle__text">
          <div>顺序刷题</div>
          <div class="num">{{submitNum}}/{{ total }}</div>
        </div>
      </van-circle>
      <div class="tetrad">
        <div class="firstline">
          <div class="one ">
            <div class="questionbank one1">
              <van-icon name="chat-o" color="#fff" />
            </div>
            <div class="text">常错题库</div>
          </div>
          <div class="two ">
            <div class="questionbank two2">
              <van-icon name="chat-o" color="#fff" />
            </div>
            <div class="text">收藏题库</div>
          </div>
        </div>
        <div class="secondline">
          <div class="three ">
            <div class="questionbank three3">
              <van-icon name="chat-o" color="#fff" />
            </div>
            <div class="text">企业题库</div>
          </div>
          <div class="four ">
            <div class="questionbank four4">
              <van-icon name="chat-o" color="#fff" />
            </div>
            <div class="text">已答题库</div>
          </div>
        </div>
      </div>
    </div>
    <div class="include">
      <h3 class="text">累计收录</h3>
      <h3 class="number">{{ total }}</h3>
    </div>
    <div class="footer">
      <div class="btn" @click="simulation">模拟面试</div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import { screenApi } from './index.js'
export default {
  name: 'exercise',
  watch: {
    totalCount () {
      this.dynamic()
    }
  },
  data () {
    return {
      progressColor: {
        '0%': 'rgba(228,1,55,0.70)',
        '100%': 'rgba(228,1,55,0.30)'
      },
      total: 0,
      totalCount: 0,
      site: '全国',
      currentLi: 0,
      currentRate: 2,
      citys: {},
      cityPositions: {},
      submitNum:0,
      rate:0
    }
  },
  methods: {
    simulation(){
      let id = this.cityPositions[this.site][this.currentLi].id
      this.$router.push(`/interview/${id}/${this.site}`)
    },
    dynamic () {
      let timer1 = setInterval(() => {
        if (this.total < this.totalCount) {
          this.total++
        } else {
          clearInterval(timer1)
        }
      }, 20)
      let timer2 = setInterval(() => {
        if (this.submitNum < this.userInfo.submitNum) {
          this.submitNum++
        } else {
          clearInterval(timer2)
        }
      }, 20)
      let timer3 = setInterval(() => {
        if (this.rate<(this.submitNum/this.total)*100) {
          this.rate++
        } else {
          clearInterval(timer3)
        }
      }, 100)
    },
    async screen () {
      const res = await screenApi()
      console.log(res)
      this.totalCount = res.data.data.totalCount
      this.citys = Object.assign({ 全国: [], 热门: [] }, res.data.data.citys)
      this.cityPositions = res.data.data.cityPositions
    },
    async menuShow (item2) {
      this.site = item2
      await this.$nextTick()
      this.$refs.mymenu.toggle(false)
    }
  },
  computed:{
      ...mapState(['userInfo'])
  },
  created () {
    this.screen()
  }
}
</script>

<style lang="less">
.exercise-container {
  background-color: #f7f4f5;
  height: 100vh;
  .van-index-anchor {
    background-color: #f7f4f5;
  }
  .header {
    height: 220px;
    .van-dropdown-menu {
      .city {
        font-size: 24px;
        margin-left: 8px;
      }
      .title {
        font-size: 30px;
      }
    }
    background-color: #fff;

    .box {
      display: flex;
      margin-top: 36px;
      font-size: 24px;
      overflow-x: auto;
      li {
        padding: 16px;
        margin: 0px 8px;
        flex-shrink: 0;
        background-color: #f7f4f5;
        border-radius: 26px;
      }
    }
    .liClick {
      background-color: #00b8d4 !important;
      color: #fff;
    }
    .box::-webkit-scrollbar {
      display: none;
    }
  }
  .middle {
    position: relative;
    margin-top: 30px;
    background-color: #fff;
    height: 400px;
    .van-circle__text {
      color: #fff;
      font-size: 24px;
    }
    .van-circle {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 236px;
      height: 236px;
    }
    .outerring {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 238px;
      height: 238px;
      background: url('~@/assets/outerring.png') no-repeat;
      background-size: 238px 238px;
    }
    .internal {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      border-radius: 50%;
      background: linear-gradient(to bottom, #ff6f92, #e40137);
    }
    .tetrad {
      padding: 0 50px;
      .firstline,
      .secondline {
        padding: 33px;
        display: flex;
        justify-content: space-between;
      }
      .questionbank {
        width: 88px;
        height: 88px;
        border-radius: 44px;
        position: relative;
        .van-icon {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .text {
        font-size: 24px;
      }
      .one1 {
        background: linear-gradient(to bottom, #ff8080, #ff4949);
      }
      .two2 {
        background: linear-gradient(to bottom, #ffda05, #ffb302);
      }
      .three3 {
        background: linear-gradient(to bottom, #00ddec, #00b8d4);
      }
      .four4 {
        background: linear-gradient(to bottom, #3ee5b1, #1dc779);
      }
    }
  }
  .include {
    height: 260px;
    background-color: #fff;
    margin-top: 33px;
    h3 {
      text-align: center;
    }
    .text {
      padding-top: 32px;
      font-size: 36px;
    }
    .number {
      font-size: 60px;
    }
  }
  .footer {
    margin-top: 32px;
    padding: 0px 30px;
    .btn {
      width: 100%;
      height: 100px;
      line-height: 100px;
      background-color: #00b8d4;
      text-align: center;
      font-size: 32px;
      color: #fff;
      border-radius: 10px;
    }
  }
}
</style>
